<template>
  <div>
    <!-- 面包屑导区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- :to="{ path: '/homePage' }" -->
      <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col>
        <el-button type="primary" @click="openAddCateDialog"
          >添加分类</el-button
        >
      </el-col>
    </el-row>

    <el-card>
      <div>
        <zk-table
          :data="cateList"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          show-index
          index-text="#"
          :border="true"
          :show-row-hover="false"
        >
          <!-- 自定义插槽 -->
          <template slot="isok" slot-scope="scope">
            <i
              class="el-icon-success"
              aria-setsize="100"
              v-if="scope.row.cat_deleted === false"
              style="font-size: 15px; color: green"
            ></i>
            <i
              class="el-icon-error"
              v-else
              style="font-size: 15px; color: red"
            ></i>
          </template>

          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag
              size="mini"
              type="success"
              v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>

          <template slot="opt">
            <el-button type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete">删除</el-button>
          </template>
        </zk-table>

        <!-- 分页区 
    @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryUserParam.pagenum"-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5]"
          :page-size="queryCateParam.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog title="提示" :visible.sync="addCateDialogVisible" width="30%"
    @closed = "closeaddCateDialog">
      <el-form
        :model="addCateForm"
        :rules="addCateFFormRules"
        ref="addCateFFormRef"
        label-width="100px"
      >
        <el-form-item prop="cat_name" label="分类名称">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>

        <!-- 这里不用prop 
        :props="{ expandTrigger: 'hover' }"
        
        checkStrictly	是否严格的遵守父子节点不互相关联
        可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
        , ...checkStrictly 
        change-on-select 也可表示选择任一级
        -->
        <el-form-item label="父级分类">
          <el-cascader
          
            v-model="selectKeys"
            :options="parenCatetList"
            :props="{ expandTrigger: 'hover', ...cascaderProps}"
            @change="handleChange"
            clearable
            change-on-select
          ></el-cascader>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
    
    <script>
export default {
  data() {
    //数据区

    return {
      queryCateParam: {
        type: 3,
        pagenum: 1,
        // 这个数据要与 page-sizes 一一对应, 如果不对应下面页码会有问题
        pagesize: 5,
      },
      pagenum: 1,
      total: 0,
      cateList: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          // 自定义插槽
          label: "是否有效",
          // prop: 'likes',
          // minWidth: '200px',
          type: "template",
          template: "isok",
        },

        {
          // 自定义插槽
          label: "排序",
          // prop: 'likes',
          // minWidth: '200px',
          type: "template",
          template: "order",
        },

        {
          // 自定义插槽
          label: "操作",
          // prop: 'likes',
          // minWidth: '200px',
          type: "template",
          template: "opt",
        },
      ],

      // 添加分类功能参数
      addCateDialogVisible: false,
      parenCatetList: [],
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      checkStrictly: true,
      selectKeys: [],
      addCateForm: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      addCateFFormRules: {
        cat_name: [
          { required: true, message: "请输分类名称", trigger: "blur" },
        ],
      },
    };
  },

  //方法区
  methods: {
    // 方法1
    async getCateList() {
      const { data: resData } = await this.$http.get("categories", {
        params: this.queryCateParam,
      });

      if (resData.meta.status !== 200) {
        return this.$message.error(resData.meta.msg);
      }

      this.cateList = resData.data.result;
      this.pagenum = resData.data.pagenum;
      this.total = resData.data.total;
      console.log(this.cateList);
    },

    handleSizeChange(newPageSize) {
      this.queryCateParam.pagesize = newPageSize;
      this.getCateList();
    },

    handleCurrentChange(newPage) {
      this.queryCateParam.pagenum = newPage;
      this.getCateList();
    },



    // 方法2
    async openAddCateDialog() {
      const { data: resData } = await this.$http.get("categories", {
        params: {type: 2},
      });

      if (resData.meta.status !== 200) {
        return this.$message.error(resData.meta.msg);
      }
      this.parenCatetList = resData.data;

      console.log(this.parenCatetList)


      this.addCateDialogVisible = true;
    },

    // 方法3
    handleChange(){
      if(this.selectKeys.length > 0){
        this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1]
        this.addCateForm.cat_level = this.selectKeys.length
      }else{
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
      console.log(this.addCateForm)

    },
    

    // 方法4
    closeaddCateDialog(){
      this.selectKeys = []
      this.$refs.addCateFFormRef.resetFields();
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0

    },

    // 方法5
    addCate(){
      this.$refs.addCateFFormRef.validate(async valid =>{
        if(!valid) {
          return
        }
        const {data: resData} = await this.$http.post("categories",this.addCateForm)
        if(resData.meta.status !== 201){
          return this.$message.error(resData.meta.msg)
        }
        this.$message.success(resData.meta.msg)
        this.getCateList();
        this.addCateDialogVisible = false

      })
    }

  },

  //钩子函数
  created() {
    this.getCateList();
  },
};
</script>
    
  <style lang="less" scoped>
.zk-table {
  margin-top: 20px;
}

.el-cascader{
  width: 100%;
}
</style>